import React, { Component, lazy } from 'react';
import './Index.scss'
// import Tabbar from '../components/Index/Tabbar'

// 从路由库导入 路由相关组件
// 导入Link组件，放置路由按钮，最终渲染成 a 标签
// 导入NavLink组件，放置路由按钮，最终渲染成a标签，会自动维护active的添加/移除，可实现点击高亮
// 导入Route组件，配置路由规则 属性为path、component
// 导入Redireact组件，配置重定向 属性为from、to
// 导入Switch组件，内部包裹的路由匹配成功后渲染该组件，不再继续匹配后续路由，否则会继续匹配后续路由，特点只渲染一个组件
import {Link,NavLink,Route,Redirect,Switch} from 'react-router-dom'

// 导入组件
// import Home from './index/Home'
// import Classify from './index/Classify'
// import Allgood from './index/Allgood'
// import Shopcart from './index/Shopcart'
// import Mine from './index/Mine'
// import NotFound from './NotFound'

// 通过  lazy  实现懒加载导入组件 （按需加载组件）
let Home = lazy(()=> import('./index/Home'))
let Classify = lazy(()=>import('./index/Classify'))
let Allgood = lazy(()=> import('./index/Allgood'))
let Shopcart = lazy(()=> import('./index/Shopcart'))
let Mine = lazy(()=> import('./index/Mine'))
let NotFound = lazy(()=> import('./NotFound'))



class Index extends Component {
    constructor(props){
        super(props)
        this.state={
            tabbar:[
                {
                    to:'/index/home',
                    icon:'iconfont icon-xiazai45',
                    name:"首页"
                },
                {
                    to:'/index/classify',
                    icon:'iconfont icon-fenlei',
                    name:"分类"
                },
                {
                    to:'/index/allgood',
                    icon:'iconfont icon-xingzhuang',
                    name:"全部商品"
                },
                {
                    to:'/index/shopcart',
                    icon:'iconfont icon-gouwuche',
                    name:"购物车"
                },
                {
                    to:'/index/mine',
                    icon:'iconfont icon-wode',
                    name:"个人中心"
                },
            ]
        }
    }
  render() { //渲染组件模板到视图
    return (
      <div className='index'>
        {/* 配置二级路由规则，也充当路由出口 */}
        <Switch>
            <Route exact path='/index/home' component={Home}></Route>
            <Route exact path='/index/classify' component={Classify}></Route>
            <Route exact path='/index/allgood' component={Allgood}></Route>
            <Route exact path='/index/Shopcart' component={Shopcart}></Route>
            <Route exact path='/index/mine' component={Mine}></Route>
            <Redirect from='/index' to='/index/home'></Redirect>
            <Route path='*' component={NotFound}></Route>
        </Switch>

        {/* 放置路由按钮 */}
        <div className='tabbar'>
            {
                this.state.tabbar.map((item,index)=>{
                       return (

                       <NavLink to={item.to} key={index}>
                            <i className={item.icon}></i>
                            <span>{item.name}</span>
                        </NavLink>
                        ) 
                })
            }
        </div>
                {/* <Tabbar></Tabbar> */}

      </div>
    );
  }
}

export default Index;